<template>
  <div class="custom-data-dialog">
    <el-dialog :title="$t('tool.modelManage.useCustomData')" :visible.sync="dialogFormVisible" width="80vw"
      :close-on-click-modal="false">
      <div class="custom-data flex flex-row">
        <div class="custom-data-left-tree flex flex-col">
          <div class="custom-data-tree-title flex justify-center items-center" style="height: 32px">
            可引用类别
          </div>
          <div class="custom-data-tree-box flex" style="height: calc(100% - 32px)">
            <Tree :treeData="ownTreeData" @nodeClick="nodeClick">
            </Tree>
          </div>
        </div>
        <div class="custom-data-center-tree flex flex-col">
          <div class="custom-data-tree-title flex justify-center items-center">
            可引用数据
          </div>
          <div style="height: calc(100% - 35px);overflow-y: auto;">
            <div class="main-version-select flex items-center">
              {{ $t("tool.modelManage.mainVersionSelect") }}：
              <el-select v-model="selectedMainVersionId" style="width: calc(100% - 80px)" class="jtyj-select"
                @change="handleChangeMainVersion">
                <el-option v-for="item in mainVersionOptions" :key="item.mainVersionId" :label="item.mainVersionName"
                  :value="item.mainVersionId">
                </el-option>
              </el-select>
            </div>
            <div class="custom-data-tree-box flex">
              <Tree ref="modelDataTreeRef" :isUseCustomData="true" :isDataModeling="true" :treeData="modelDataList"
                :folderMenu="right_menuList.rightMenuList_7" :fileMenu="right_menuList.rightMenuList_4"
                @handleAddModel="handleAddModel" @handleMenuClick="handleMenuClick" @nodeClick="handleNodeClick"
                @moveNodeOrder="moveNodeOrder"></Tree>
            </div>
          </div>

        </div>
        <div class="custom-data-right-box flex flex-col">
          <div class="model-jsonschema-display">
            <FolderDetail v-if="isFolder" ref="folderRef" :readonly="true" :flag="'dataModeling'"
              :nodeInfo="selectedModelData"></FolderDetail>
            <template v-else>
              <JsonSchema v-if="
                selectedModelData &&
                selectedModelData.data.jsonSchemaData != null
              " ref="jsonSchemaRef" :currentName="$t('tool.modelManage.rootNode')"
                :currentSchema.sync="selectedModelData.data.jsonSchemaData"
                :parentSchema.sync="selectedModelData.data.jsonSchemaData" :currentIndex="1" :writable="true"
                :isReadonly="true"></JsonSchema>
            </template>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="jtyj-btn-primary" @click="submitForm">{{
          $t("setup.buttonText.confirm")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSelfModelTree,
  getSharedModelTree,
  getMainVersionList,
  getModelDataTree,
  addModelData,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
import Tree from "@/components/LeftTree/tree.vue";
import JsonSchema from "./gradient.vue";
import FolderDetail from "./folder-detail.vue";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedNodeInfo: null, // 当前选中的树节点信息
      selectedMainVersionId: null, // 当前选中的主版本id
      selectedModelDataId: null, // 当前选中的数据结构id
      selectedModelData: null, // 当前选中的数据结构
      dialogFormVisible: false,
      isFolder: false, // 是否是文件夹
      ownTreeData: [], // 本账户模型列表
      shareTreeData: [], // 共享账户模型列表
      mainVersionOptions: [], // 版本列表
      modelDataList: [], // 数据结构列表
      defaultProps: {
        expandTrigger: "click",
        emitPath: false,
        label: "name",
        value: "id",
        children: "children",
      },
      filters: {
        status: "",
        tags: "",
        owner: "",
        creator: "",
        lastModifier: "",
        matchType: "include",
      },
    };
  },
  components: {
    Tree,
    JsonSchema,
    FolderDetail,
  },
  computed: {
    ...mapState({
      right_menuList: (state) => state.modelManageTool.right_menuList,
      userId: (state) => state.user.id,
    }),
  },
  methods: {
    init() {
      this.dialogFormVisible = true;
      this.getList();
    },
    // 获取模型树
    getList() {
      getSelfModelTree().then((res) => {
        if (res.code == 200 && Array.isArray(res.data)) {
          this.ownTreeData = res.data[0].commonTreeList;
        }
      });
      getSharedModelTree().then((response) => {
        if (response.code == 200 && Array.isArray(response.data)) {
          this.shareTreeData = response.data;
        }
      });
    },
    // 获取版本列表
    getMainVersionList(node) {
      this.mainVersionOptions = [];
      getMainVersionList({
        modelId: node.modelId,
      }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.rows)) {
            this.mainVersionOptions = response.rows;
            if (this.mainVersionOptions.length > 0) {
              if (!this.selectedMainVersionId) {
                this.selectedMainVersionId =
                  this.mainVersionOptions[0].mainVersionId;
              }
              this.getModelData(this.selectedMainVersionId);
            }
          }
        }
      });
    },
    // 获取模型和主版本唯一决定的数据结构列表
    getModelData(mainVersion) {
      this.selectedModelData = null;
      getModelDataTree({
        modelId: this.selectedNodeInfo.data.modelId,
        mainVersion: mainVersion,
      }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.data)) {
            this.modelDataList = response.data[0].commonTreeList;
          }
        }
      });
    },
    // 点击菜单项触发的事件(此处不需要菜单)
    handleMenuClick(menu, node) { },
    // 树节点点击事件
    nodeClick(nodeData, readonly) {
      this.selectedNodeInfo = nodeData;
      this.selectedMainVersionId = null;
      this.selectedModelData = null;
      this.getMainVersionList(nodeData.data);

      // 获取主版本列表
      // 根据主版本获取其中的数据建模
    },
    // 主版本改变以后
    handleChangeMainVersion(val) {
      this.selectedModelData = null;
      this.getModelData(val);
    },
    // 选择的数据结构发生变化
    handleNodeClick(node) {
      this.isFolder = node.data.nodeType == 0;
      this.selectedModelData = node;
      if (node.data.jsonSchemaData == null) return;
      if (typeof node.data.jsonSchemaData == "string") {
        this.selectedModelData.data.jsonSchemaData = JSON.parse(
          node.data.jsonSchemaData
        );
      }
    },
    // 移动树节点的顺序(此处不需要拖拽功能)
    moveNodeOrder(draggingNode, dropNode, dropType) { },
    // 新增模型(此处不需要)
    addModel() { },
    // 新增或修改文件夹(此处不需要)
    addOrUpdateFolder(sign, node) { },
    handleAddModel() { },
    // 确认选择当前数据
    submitForm() {
      const nodeInfo = JSON.parse(JSON.stringify(this.selectedModelData.data));
      addModelData({
        modelId: this.selectedNodeInfo.data.modelId,
        mainVersion: this.selectedMainVersionId,
        modelDataName: nodeInfo.modelDataName,
        dataEnglishName: nodeInfo.dataEnglishName,
        parentId: nodeInfo.parentId,
        nodeType: 1,
        modelDataCode: nodeInfo.modelDataCode,
        modelDataType: nodeInfo.modelDataType,
        modelDataDescription: nodeInfo.modelDataDescription,
        userId: nodeInfo.userId,
        jsonSchemaData: JSON.stringify(nodeInfo.jsonSchemaData),
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.$emit("refresh");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-data-dialog {
  .custom-data {
    width: 100%;
    height: 540px;

    .custom-data-left-tree,
    .custom-data-center-tree {
      width: 230px;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--ui-border-color-split);
      box-sizing: border-box;

      .custom-data-tree-title {
        height: 35px;
        font-weight: 600;
        letter-spacing: 2px;
      }

      .main-version-select {
        height: 45px;
      }

      .custom-data-tree-box {
        flex-grow: 1;
        padding-right: 5px;
      }
    }

    .custom-data-left-tree {
      width: 230px;
    }

    .custom-data-center-tree {
      width: 240px;
      padding: 0 5px;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .custom-data-right-box {
      width: calc(100% - 230px - 240px);
      padding-left: 5px;
      box-sizing: border-box;

      .model-jsonschema-display {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--ui-border-color-split);
        border-radius: 6px;
        padding: 5px;
        box-sizing: border-box;
        overflow: auto;
      }
    }
  }
}
</style>